<template>
    <div>
        <Modal vif="isLoad" v-model="modal" class="modal-center" :class="{'modal-full':previewMode}" title="数据导入" :width="previewMode?'80%':600">
            <div>
                <form ref="form" enctype="multipart/form-data" method="post" v-if="!previewMode">
                    <div class="template-box">
                    <Select-control class="template-select" v-if="actionParam.path_template" v-model="templateId" placeholder="请选择模板" :path="actionParam.path_template" :postData="{status:5}" :defaultSelect="true" :hasPage="true">
                    </Select-control>
                    <a class="button-box" v-if="actionParam.path_template && actionParam.download_template && templateId!==null" :href="downloadPath" download>
                      <Button icon="code-download" type="success">下载模板</Button>
                    </a>
                    <Button class="button-box" v-if="actionParam.path_template && actionParam.download_template && templateId===null" :disabled="true" icon="code-download" type="success">下载模板</Button>
                    </div>
                    <Upload v-model="file" ref="upload" name="file" class="file-box" @fileChange="fileChange"></Upload>
                </form>
                <div v-else>
                  <DataTable ref="dataTable" :model="{fields:previewData.model}" :data="previewData.data"></DataTable>
                </div>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="previewBack" v-show="previewMode" type="ghost">返回</i-button>
                <i-button @click="confirmSubmit" v-if="previewMode" type="primary" :loading="posting">确认</i-button>
                <i-button @click="formSubmit" v-if="!previewMode" type="primary" :loading="uploading">确认</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SelectPanel from "@/components/selectPanel";
import Modal from "@/element/modal";
import Upload from "@/element/upload";
import SelectControl from "@/components/selector";
import $ from "@/common";
import ModalBase from "../modalBase";
import DataTable from "@/components/gridTableSample";

export default {
  extends: ModalBase,
  props: {
    open: {},
    isLoad: {
      defalut: false
    }
  },
  data() {
    return {
      current: 0,
      uploading: false,
      modal: false,
      templateId: null,
      file: null,
      fileName: null,
      previewMode: false,
      memo: null,
      posting: false
    };
  },
  computed: {
    validate() {
      return this.fileName !== null || true;
    },
    downloadPath() {
      var path = this.actionParam.download_template;
      if (path && path[0] !== "/") path = "/" + path;
      return $.composePath(path, {
        excel_ds_id: this.templateId
      });
    }
  },
  watch: {
    open(v) {
      this.modal = v;
    },
    modal(v) {
      this.$emit("update:open", v);
      //this.open = false
    }
  },
  created() {},
  methods: {
    load() {
      this.fileName = null;
    },
    close() {
      this.modal = false;
      this.previewMode = false;
    },
    uploadComplete(e) {
      if (e.status === 0 || (e.target && e.target.status !== 200)) {
        this.$Modal.error({
          title: "提交错误",
          content: "文件上传错误"
        });
      } else {
        if (this.actionParam.path_confirm) {
          this.previewData = e.data;
          if (e.data.model) {
            for (let field of e.data.model) {
              field.code = field.field_code;
            }
          }
          this.previewLoad();
        } else {
          this.$parent.actionSubmit();
        }
      }
    },
    confirmSubmit() {
      this.posting = true;
      var data = this.$refs.dataTable.getSelectedDataRows();
      if (!data || !data.length) {
        data = this.$refs.dataTable.tableData;
      }

      /*
      var data = { id: this.previewData.id };
      var rows = this.$refs.dataTable.getSelectedIds();
      if (rows && rows.length) {
        data.rows = rows;
      }
      */
      $.link(this.actionParam.path_confirm, data)
        .then(() => {
          this.$parent.actionSubmit();
        })
        .finally(() => {
          this.posting = false;
        });
    },
    previewLoad() {
      this.previewMode = true;
    },
    previewBack() {
      this.previewMode = false;
    },
    formSubmit: function() {
      this.uploading = true;
      var upLoadParam = {};
      upLoadParam.excel_ds_id = this.templateId;
      $.submitForm(this.actionParam.path_upload, null, {
        form: this.$refs.form,
        file: this.$refs.upload.file,
        param: upLoadParam
      })
        .then(e => {
          this.uploadComplete(e);
        })
        .finally(() => {
          this.uploading = false;
        });
    },
    fileChange(name) {
      this.fileName = name;
    }
  },
  components: {
    Modal,
    SelectPanel,
    Upload,
    DataTable,
    SelectControl
  }
};
</script>

<style lang="less">
.file-box {
  margin-top: 10px;
}
.template-box {
  display: flex;
  .template-select {
    flex: 1;
  }
  .button-box {
    margin-left: 8px;
  }
}
.page-step {
  padding: 10px;
}
</style>
